home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2008 May / PersonalComputerWorld-May2008-CoverdiscCD.iso / Software / Full / Nero 7 / Installation / Cab / 83AF5E4E.cab / ScrollingB9CB6C96.js < prev    next >
Encoding:
JavaScript  |  2006-06-20  |  8.4 KB  |  231 lines
  1. // when you focus on an item, the browser will automatically scroll it into view. This file provides additional functionality.
  2. // It enables the pg up/dn buttons, and it updates the buttons' positions when scrolling takes place (these positions are needed
  3. // when you move the focus, in order to calculate which other buttons on the page are closest)
  4.  
  5. function pageUpDown(direction)
  6. {
  7.     // This function determines what to do if the user presses the Page Up (+) or Page Down (-) key
  8.  
  9.     // Call the getScrollParent function to find the scrollable parent object
  10.     var oScrollParent = getScrollParent()
  11.     if (oScrollParent == null)
  12.     {
  13.         return
  14.     }
  15.     // find correct button to focus on
  16.     var oScrollToBtn = getScrollToButton(oScrollParent, direction);
  17.     oCurFocus = oScrollToBtn;
  18.     oCurFocus.focus();
  19.     // check if scrolling has taken place, and update positions of scrollable elements if needed
  20.     if (didScroll())
  21.     {
  22.         updateScrollPositions()
  23.     }
  24. }
  25.  
  26. function getScrollParent()
  27. {
  28.     /* For an item to scroll correctly when the user presses the Page Up (+) or Page Down (-) keys, it has to have a parent object that
  29.     has its custom "MCScrollable" attribute set to "true". This function locates that parent object */
  30.     // Start with the object that currently has focus ...
  31.     var oTempObj = oCurFocus
  32.     // ... then check its parent, grandparent, great-grandparent, and so on.
  33.     for (i=0; i<5000; i++)
  34.     {
  35.          oTempObj = oTempObj.parentElement
  36.         // Stop when you get to the scrollable parent element
  37.         if (oTempObj.MCScrollable == "true")
  38.         {
  39.             return oTempObj
  40.         }
  41.         // If you get as high as the BODY tag without finding a scrollable parent element, return null
  42.         if (oTempObj.tagName == "BODY")
  43.         {
  44.             return null
  45.         }
  46.     }
  47. }
  48.  
  49. function getScrollToButton(oScrollParent, direction)
  50. {
  51.     // This function determines which item to focus on next when the user presses the Page Up (+) or Page Down (-) key
  52.  
  53.     // find top & bottom of scroll parent relative to top of pg (don't worry about 2 px offset)
  54.     var oBottomVisibleBtn = oCurFocus
  55.     var oTopVisibleBtn = null
  56.     var oLowerBtn
  57.     var oHigherBtn = null
  58.     //var oScrollToBtn
  59.     var oScrollParentPos = oScrollParent.getBoundingClientRect()
  60.     var nScrollParentTop = oScrollParentPos.top
  61.     var nScrollParentBottom = oScrollParentPos.bottom
  62.     var nScrollParentHeight = (nScrollParentBottom - nScrollParentTop)
  63.  
  64.     // go through all focusable elements in order;
  65.     for (i=0; i<oScrollParent.all.length; i++)
  66.     {
  67.         //identify object
  68.         var obj = oScrollParent.all(i)
  69.         // make sure object is focusable
  70.         if (obj.MCFocusable == "true" && direction == "down")
  71.         {
  72.             //find top of object
  73.             var nObjTop = obj.nTopPos;
  74.             // for the lowest btn whose top is visible (by at least two pixels), assign bottomVisibleBtn to object
  75.             if ((nObjTop + 2) < nScrollParentBottom)
  76.             {
  77.                 oBottomVisibleBtn = obj
  78.             }
  79.             // Find lowest button down to one Scroll Parent Height below bottom visible btn
  80.             if (nObjTop < (nScrollParentBottom + nScrollParentHeight))
  81.             {
  82.                 oLowerBtn = obj
  83.             }
  84.         }
  85.         if (obj.MCFocusable == "true" && direction == "up")
  86.         {
  87.             var nObjBottom = obj.getBoundingClientRect().bottom;
  88.             // for the first btn that's even partly visible, assign topVisibleBtn to object
  89.             if (nObjBottom > nScrollParentTop && oTopVisibleBtn == null)
  90.             {
  91.                 oTopVisibleBtn = obj
  92.             }
  93.             // Find first button that's within one Scroll Parent Height above top visible btn
  94.             if (nObjBottom > (nScrollParentTop - nScrollParentHeight) && oHigherBtn == null)
  95.             {
  96.                 oHigherBtn = obj
  97.             }
  98.         }
  99.     }
  100.     if (direction == "up")
  101.     {
  102.         if (oTopVisibleBtn != oCurFocus)
  103.         {
  104.             // if focus is not already on bottom visible btn, move focus to there and end function
  105.             return oTopVisibleBtn
  106.         }
  107.         else
  108.         {
  109.             // If focus is already on bottom visible, focus on button one box height lower
  110.             return oHigherBtn
  111.         }
  112.     }
  113.  
  114.     if (direction == "down")
  115.     {
  116.         if (oBottomVisibleBtn != oCurFocus)
  117.         {
  118.             // if focus is not already on bottom visible btn, return bottom visible btn and end function
  119.             return oBottomVisibleBtn
  120.         }
  121.         else
  122.         {
  123.             // If focus is already on bottom visible, return button one box height lower than that
  124.             return oLowerBtn
  125.         }
  126.     }
  127. }
  128.  
  129. function didScroll()
  130. {
  131.     // This function indicates whether current-focus item has scrolled or otherwise moved vertically on the page.
  132.     // If the current-focus item's top position does not equal the position it was in when the page loaded, return true
  133.     if((oCurFocus.getBoundingClientRect().top - 2) != oCurFocus.nTopPos)
  134.     {
  135.         return true
  136.     }
  137. }
  138.  
  139. function updateScrollPositions()
  140. {
  141.     // object has scrolled; reset "nCenterYCoord" property for all scrolling buttons in box
  142.     // so that auto nav will be based on new positions for buttons
  143.     var oScrollParent = getScrollParent()
  144.     if (oScrollParent == null)
  145.     {
  146.         oScrollParent = body
  147.     }
  148.     // for all objects in the parent container of the scrolling element
  149.     for (i=0; i<oScrollParent.all.length; i++)
  150.     {
  151.         //identify object
  152.         var obj = oScrollParent.all(i)
  153.         // make sure object is focusable
  154.         if (obj.MCFocusable == "true")
  155.         {
  156.             // reassign Y coordinate values for based on its new top position
  157.             var tempObjPosition = obj.getBoundingClientRect();
  158.             obj.nTopPos = tempObjPosition.top - 2
  159.             obj.nBottomPos = tempObjPosition.bottom - 2
  160.             var objCenterTop = (obj.nTopPos+(obj.nHeight/2))
  161.             obj.nCenterYCoord = objCenterTop
  162.         }
  163.     }
  164. }
  165.  
  166. ///////////////////////////////////////////////////////////////////////////////////////////////////
  167. // code for counter that indicates how many buttons are in scrolling menu, etc.
  168.  
  169. // variable to indicate whether there is a counter on the page
  170. var isCounter = false
  171. // variable to hold array of scrolling buttons
  172. var aScrollBtnsArray
  173.  
  174. function setCounter()
  175. {
  176.     /* this function sets the numeric value for the item counter found at the lower right of
  177.     each scrollable menu in the templates, to indicate how many focusable items are in the menu. */
  178.     // Reset isCounter value to true, indicating that there is a counter on the page
  179.     isCounter = true
  180.     //Make array for scrolling buttons
  181.     aScrollBtnsArray = new Array()
  182.     // Loop through all focusable items in the scrolling span
  183.     for (i=0; i<scrollspan.all.length; i++)
  184.     {
  185.         var obj = scrollspan.all(i)
  186.         if(obj.MCFocusable == "true")
  187.         {
  188.             var nextElement = aScrollBtnsArray.length
  189.             aScrollBtnsArray[nextElement] = obj
  190.         }
  191.     }
  192.     // update the SPAN whose ID is "counterTotal" to reflect total number of focusable items in scrolling span
  193.     counterTotal.innerHTML = aScrollBtnsArray.length
  194. }
  195.  
  196. function updateCounter()
  197. {
  198.      /* this function updates the numeric value for the item counter found at the lower right of
  199.     each scrollable menu in the templates, to indicate which item currently has focus. */
  200.  
  201.     if (isCounter != true)
  202.     {
  203.         // if there is no counter on the page, return
  204.         return
  205.     }
  206.     // variable to track whether focus is in scrollable menu
  207.     var bFocusInMenu = false
  208.     //Loop through all focusable items in scrolling menu
  209.     for (i=0; i<aScrollBtnsArray.length; i++)
  210.     {
  211.         // if item currently has focus ...
  212.         if (aScrollBtnsArray[i] == oCurFocus)
  213.         {
  214.             // set counter number to show which item has focus
  215.             counterNum.innerHTML = (i + 1);
  216.             // update variable to indicate focus is in scrollable menu
  217.             bFocusInMenu = true
  218.         }
  219.     }
  220.     // if focus in in menu, make sure arrows are not grayed out.
  221.     if (bFocusInMenu == true)
  222.     {
  223.         itemCounterSpan.style.filter = "none"
  224.     }
  225.     // Else gray out arrows to indicate disabled state.
  226.     else
  227.     {
  228.         itemCounterSpan.style.filter = "alpha(opacity=50)"
  229.     }
  230. }
  231.